<template>
  <div class="security-settings">
    <div class="form-header">
      <h3>{{ t('dashboard.profile.security.title') }}</h3>
      <p>{{ t('dashboard.profile.security.subtitle') }}</p>
    </div>

    <!-- 密码修改 -->
    <div class="security-section">
      <h4>{{ t('dashboard.profile.security.changePassword') }}</h4>
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="120px"
      >
        <el-form-item :label="t('dashboard.profile.security.currentPassword')" prop="currentPassword">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            :placeholder="t('dashboard.profile.security.currentPassword_placeholder')"
            show-password
          />
        </el-form-item>
        
        <el-form-item :label="t('dashboard.profile.security.newPassword')" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            :placeholder="t('dashboard.profile.security.newPassword_placeholder')"
            show-password
          />
          <div class="password-strength">
            <span>{{ t('dashboard.profile.security.passwordStrength') }}</span>
            <el-tag :type="passwordStrengthType">{{ passwordStrengthText }}</el-tag>
          </div>
        </el-form-item>
        
        <el-form-item :label="t('dashboard.profile.security.confirmPassword')" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            :placeholder="t('dashboard.profile.security.confirmPassword_placeholder')"
            show-password
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleChangePassword" :loading="passwordLoading">
            {{ t('dashboard.profile.security.changePassword_button') }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 安全信息 -->
    <div class="security-section">
      <h4>{{ t('dashboard.profile.security.info') }}</h4>
      <div class="security-info">
        <div class="info-item">
          <span class="info-label">{{ t('dashboard.profile.security.lastLoginTime') }}</span>
          <span class="info-value">{{ formatDate(new Date()) }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">{{ t('dashboard.profile.security.lastLoginIP') }}</span>
          <span class="info-value">192.168.1.100</span>
        </div>
        <div class="info-item">
          <span class="info-label">{{ t('dashboard.profile.security.passwordLastModified') }}</span>
          <span class="info-value">{{ t('dashboard.profile.security.daysAgo', { days: 30 }) }}</span>
        </div>
      </div>
    </div>

    <!-- 安全建议 -->
    <div class="security-section">
      <h4>{{ t('dashboard.profile.security.suggestions') }}</h4>
      <el-alert
        :title="t('dashboard.profile.security.suggestion_title')"
        type="info"
        :closable="false"
        show-icon
      >
        <ul>
          <li>{{ t('dashboard.profile.security.suggestion_1') }}</li>
          <li>{{ t('dashboard.profile.security.suggestion_2') }}</li>
          <li>{{ t('dashboard.profile.security.suggestion_3') }}</li>
          <li>{{ t('dashboard.profile.security.suggestion_4') }}</li>
        </ul>
      </el-alert>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'

// 表单引用
const passwordFormRef = ref()
const passwordLoading = ref(false)
const { t } = useI18n()

// 密码表单数据
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码验证规则
const passwordRules = {
  currentPassword: [
    { required: true, message: t('dashboard.profile.security.rules.current_required'), trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: t('dashboard.profile.security.rules.new_required'), trigger: 'blur' },
    { min: 8, message: t('dashboard.profile.security.rules.new_min'), trigger: 'blur' },
    { 
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,
      message: t('dashboard.profile.security.rules.new_pattern'),
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: t('dashboard.profile.security.rules.confirm_required'), trigger: 'blur' },
    {
      validator: (rule: any, value: string, callback: Function) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error(t('dashboard.profile.security.rules.confirm_match')))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 密码强度计算
const passwordStrength = computed(() => {
  const password = passwordForm.newPassword
  if (!password) return 0
  
  let score = 0
  if (password.length >= 8) score++
  if (/[a-z]/.test(password)) score++
  if (/[A-Z]/.test(password)) score++
  if (/\d/.test(password)) score++
  if (/[@$!%*?&]/.test(password)) score++
  
  return score
})

const passwordStrengthType = computed(() => {
  const strength = passwordStrength.value
  if (strength <= 2) return 'danger'
  if (strength <= 3) return 'warning'
  if (strength <= 4) return 'success'
  return 'success'
})

const passwordStrengthText = computed(() => {
  const strength = passwordStrength.value
  if (strength <= 2) return t('dashboard.profile.security.strength.weak')
  if (strength <= 3) return t('dashboard.profile.security.strength.medium')
  if (strength <= 4) return t('dashboard.profile.security.strength.strong')
  return t('dashboard.profile.security.strength.very_strong')
})

// 格式化日期
const formatDate = (date: Date): string => {
  return date.toLocaleString('zh-CN')
}

// 修改密码
const handleChangePassword = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    
    passwordLoading.value = true
    
    // TODO: 调用修改密码API
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    ElMessage.success(t('dashboard.profile.security.messages.success'))
    
    // 清空表单
    Object.assign(passwordForm, {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(t('dashboard.profile.security.messages.fail'))
    }
  } finally {
    passwordLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.security-settings {
  .form-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color-light);

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 8px 0;
      transition: color 0.3s ease;
    }

    p {
      font-size: 14px;
      color: var(--text-color-secondary);
      margin: 0;
      transition: color 0.3s ease;
    }
  }

  .security-section {
    margin-bottom: 32px;
    padding: 24px;
    background-color: var(--bg-color-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color-light);
    transition: all 0.3s ease;

    h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 16px 0;
      transition: color 0.3s ease;
    }

    .password-strength {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-color-secondary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .security-info {
      .info-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color-light);

        &:last-child {
          border-bottom: none;
        }

        .info-label {
          color: var(--text-color-secondary);
          transition: color 0.3s ease;
        }

        .info-value {
          color: var(--text-color-primary);
          font-weight: 500;
          transition: color 0.3s ease;
        }
      }
    }

    :deep(.el-alert) {
      background-color: var(--bg-color-tertiary);
      border: 1px solid var(--border-color-light);

      .el-alert__content {
        color: var(--text-color-primary);

        ul {
          margin: 8px 0 0 0;
          padding-left: 20px;

          li {
            margin-bottom: 4px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
  }
}
</style>
